/*
 * @Author: zhangzhen
 * @Date: 2023-01-04 15:11:48
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-15 09:02:42
 *
 */
import React, {useContext} from 'react';
import {Row, Col, Input, Radio} from 'antd';
import styles from './styles.module.scss';
import {FormContext} from '../../context';
import AddColumns from './AddColumns';

const TableOperate = () => {
    const {
        currentIndex,
        formConTextValue,
        setFormConTextValue,
        currentItem,
        setCurrentItem,
    } = useContext(FormContext);
    // 设置值
    const setValue = (key: string, value: any) => {
        const cloneValue = [...formConTextValue];
        cloneValue[currentIndex][key] = value;
        setFormConTextValue(cloneValue);
        setCurrentItem(cloneValue[currentIndex]);
    };
    return (
        <div className={styles.inputOperate}>
            <div className={styles.currentName}>
                {currentItem.key === 'radio' && '单选框'}
                {currentItem.key === 'checkbox' && '多选框'}
            </div>
            <Row>
                {/* 标签名称 */}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>标签名称:</span>
                        <Input
                            placeholder="请输入"
                            value={currentItem.label}
                            onChange={(e) => {
                                setValue('label', e.target.value);
                            }}
                        />
                    </div>
                </Col>
                {/* 字段名称 */}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>字段名称:</span>
                        <Input
                            placeholder="请输入"
                            value={currentItem.name}
                            onChange={(e) => {
                                setValue('name', e.target.value);
                            }}
                        />
                    </div>
                </Col>

                {/* 选项 */}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>表格列配置:</span>
                        <AddColumns />
                    </div>
                </Col>
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>是否必填:</span>
                        <Radio.Group
                            options={[
                                {label: '是', value: true},
                                {label: '否', value: false},
                            ]}
                            value={currentItem.required}
                            onChange={(e) => {
                                setValue('required', e.target.value);
                            }}
                        />
                    </div>
                </Col>
            </Row>
        </div>
    );
};

export default TableOperate;
